<template>
  <div class="container">
    <div class="toper">
        <div class="song"><i class="iconfont" @click="toggle">&#xe6b7;</i>网易云</div>
      </div>
     <div class="item" v-for="(item,index) of detail" :key="item.id">
      <p class="num">{{index+1}}</p>
      <img class="bg" :src="item.al.picUrl" alt />
        <div class="title">
        <p class="name">{{item.name|farmat()}}</p>
        <p class="ar">by:{{item.ar[0].name}}</p>
      </div>
      <p class="time">{{item.dt | time()}}</p>
        <img class="icon" src="../../assets/images/zt.png" alt="">
  </div>
  </div>
</template>

<script>
export default {
  name:"detail",
  data() {
    return {
      detail:[]
    }
  },
  computed: {
    id() {
      return this.$route.query.id;
    }
  },
   methods: {
      toggle(){
          this.$router.back()
      }
  },
  mounted() {
    this.axios.get(`playlist/detail?id=${this.id}`).then(res => {
      this.detail = res.data.playlist.tracks;
      console.log(this.detail);
    });
  }

}
</script>

<style lang="less" scoped>
.toper{
  height: 60px;
  background: rgba(214, 84, 67, 0.333);
  display:flex;
  justify-content: center;
  align-items: center;

}
.iconfont{
  position: relative;
  right:120px;
}
.bg{
  margin-top: 10px;
  margin-bottom: 10px;
  height: 100px;
  width:100px;
}
.item{
  border-bottom: 1px solid #5d5d5d;
  display: flex;
  justify-content:space-evenly;
  font-size: 12px;
  
 
}
.icon{
  width:40px;
  height: 40px;
  margin-top: 40px;
}
.p{
   display: block;
  width:200px;
}
.num{
  width:50px;
  color:red;
  font-size: 20px;
}
.title{
  width:100px;
  line-height: 20px;
}
.name{
  color:blue;
  font-size: 15px;
}
.ar{
  color:#5d5d5d;
}
.time{
  margin-top: 55px;
}


</style>